<!-- 门票下单支付 -->

<template>
	<uni-nav-bar color="#000" :fixed="true" background-color="#fff" status-bar left-icon="left" title="门票详情" @clickLeft="back" />
	<view class="ticket">
		<image :src="state.shopDetail.cover_img" mode="widthFix"></image>
	</view>
	
	<view class="detail">
		<view class="title">
			<view class="name">{{state.shopDetail.name}}</view>
		</view>
		<view class="time">{{state.shopDetail.ticket_date}}</view>
		<view class="address">{{state.shopDetail.ticket_address}}</view>
	</view>
	
	<view class="buy-title">
		遥远的邻居
	</view>
	<view class="buy-address flex">
		<view v-for="(item, index) in state.basecity" class="item" @click="changecity(index)" :class="state.cindex == index? 'cactive':''">{{item}}</view>
	</view>
	<view class="buy-date">
		地址：北京天安门   展期: 2024-3-3
	</view>
	
	
	<!-- 选购规格 -->
	<view class="specification">
		<view class="type">
			<view class="tab" v-for="(item, index) in 6" :key="index">
				<!-- <nut-button
					:color="state.popupIndex == item.ind? '#000000' : ''"
					@click="changeType(item, index)">
					{{item.name}}
				</nut-button> -->
				<view class="btn">早鸟票1早鸟票早鸟</view>
			</view>
		</view>
	</view>
	
	<view class="date">
		<DateTabs v-model="state.time" @change='onDateTabsChange'></DateTabs>
		<view class="must">
			<view class="title">
				购买须知
			</view>
			<view class="descs">
				禁止购买禁止购买禁止购买禁止购买禁止购买禁止购买禁止购买禁止购买禁止购买
			</view>
		</view>
	</view>
	
	<view class="desc">
		<view class="left">
			<view class="title">
				<text>选择数量</text>
			</view>
			<view class="sub" style="opacity: .6;">
				同一有效证件同一使用日期限购，景区在所有平台同一有效证件同一使用日期限购，景区在所有平台同一有效证件同一使用日期限购，景区在所有平台
			</view>
		</view>
		<view class="right">
			<view class="type" style="margin-top: 18rpx;">
				<view class="tab">
					<nut-input-number v-model="state.total" />
				</view>
			</view>
		</view>
	</view>
	<view style="height: 200rpx"></view>
	
	<view class="bottom-btn">
		<view class="btn-item-two active" @click="shop(1)">立即购票</view>
	</view>
	
</template>


<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { ref, reactive, nextTick } from "vue";
import { goodsInfo } from '@/request/api/shop.js';
import { useCartStore } from '@/store/cart.js';
import Poster from '@/components/zhangyuhao-poster/Poster.vue';
import DateTabs from '@/uni_modules/hope-11-date-tabs-v3/components/hope-11-date-tabs-v3/hope-11-date-tabs-v3.vue'

const store = useCartStore();

const id = ref(null);
const buyType = ref(null);  // 0 购物车  1 购买


const showShare = ref(false);  // 海报弹窗
const showTeleport = ref(false);
const showShop = ref(false);

const shareImg = ref('');
const posters = ref('');

const state = reactive({
	shopDetail: {},
	popupIndex: 0,
	tab: 0,
	total: 1,
	cindex: 0,
	basecity: ['北京站', '天津站', '山东站'],
	popData: [],
	time: '',
	list: [{
			type: 'image',
			// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
			path: 'https://img.agrimedia.cn/storage/bmdc/20230501/4c31c9091df8715dc3354ec78fea6c9cb3d90f50.jpeg?imageView/1/w/400/h/400',
			x: 0,
			y: 0,
			width: 700,
			height: 1200
		},
		{
			type: 'image',
			// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
			path: 'https://img.agrimedia.cn/storage/bmdc/20230501/4c31c9091df8715dc3354ec78fea6c9cb3d90f50.jpeg?imageView/1/w/400/h/400',
			x: 530,
			y: 1050,
			width: 100,
			height: 100
		},
		{
			type: 'textarea',
			width: 700,
			height: 150,
			x: 30,
			y: 1050,
			text: '1.保存图片到相册',
			size: 30,
			color: '#fff'
		},
		{
			type: 'textarea',
			width: 700,
			height: 150,
			x: 30,
			y: 1100,
			text: '2.打开微信扫码可见',
			size: 30,
			color: '#fff'
		},
		{
			type: 'textarea',
			width: 700,
			height: 150,
			x: 30,
			y: 1150,
			text: '2.打开微信扫码可见',
			size: 30,
			color: '#fff'
		}
	]
})

onLoad((e) => {
	id.value = e.id;
	getDetailData()
})

const changecity = (e) => {
	state.cindex = e;
}

const onDateTabsChange = (e) => {
    console.log(e)
    console.log(state.time)
}

// 商品详情
const getDetailData = async () => {
	try {
		let paramas = { id: id.value }
		const resultData = await goodsInfo(paramas);
		state.shopDetail = resultData.data;
		
		// 规格转换
		state.popData = state.shopDetail.sku.split(",").map((item, ind) => {
		  const [name, price, index] = item.split("-");
		  return { name, price: parseInt(price), ind };
		});
		
		// 海报设置
		state.list[0].path = state.shopDetail.img[0];
		state.list[1].text = state.shopDetail.ticket_address;
		state.list[2].text = state.shopDetail.ticket_date;
		state.list[3].text = state.shopDetail.sku;
	} catch (e) { }
}

// 收藏商品
const collect = async() => {
	try {
		let paramas = { goods_id: state.shopDetail.id, title:  state.shopDetail.name }
		const resultData = await addCollect(paramas);
		if (resultData.code === 200) {
			uni.showToast({ title: resultData.msg, icon: 'none' });
		};
	} catch (e) { }
}

// 打开选择规格, 0 购物车  1 下单
const shop = (index) => {
	buyType.value = index;
	showShop.value = !showTeleport.value;
}

// 选择规格
const changeType = (item, index) => {
	state.popupIndex = index;
}

// 立即购票 + 1张默认的进入购物车
const goBuy = () => {
	state.shopDetail.size = state.popData[state.popupIndex];
	state.shopDetail.total = state.total;  // 购买数量
	store.addGoods(state.shopDetail);
	uni.navigateTo({
		url: '/pages/index/cart?type=0'
	})
}

// 0 添加购物车  1 下单
const addshop = () => {
	state.shopDetail.size = state.popData[state.popupIndex];
	state.shopDetail.total = state.total;  // 购买数量
	state.shopDetail.allprice = state.total;
	showShop.value = false;
	if (store.token) {
		if(buyType.value == 0) {
			store.addGoods(state.shopDetail);
		} else {
			// 直接去下单页
			uni.navigateTo({
				url: `/pages/shop/shoporder?data=${JSON.stringify(state.shopDetail)}&type=1`
			})
		}
	} else {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
}

// 返回
const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	page {
	}
	.ticket {
		width: 100%;
		text-align: center;
		image {
			width: 100%;
		}
	}
	.buy-title {
		text-align: center;
		height: 80rpx;
		display: flex;
		font-size: 40rpx;
		flex-direction: column;
		justify-content: center;
	}
	.buy-address {
		display: flex;
		font-size: 24rpx;
		padding: 20rpx 0rpx;
		justify-content: center;
		.item {
			margin: 10rpx 20rpx;
			display: block;
			color: #fff;
			padding: 10rpx 14rpx;
			background-color: #fff;
			border: 1rpx solid #000;
			color: #000;
		}
		.cactive {
			background-color: #000;
			color: #fff;
		}
	}
	.buy-date {
		display: flex;
		font-size: 24rpx;
		justify-content: center;
	}
	
	.detail {
		border-bottom: 4rpx solid #DDD8D3;
		padding: 60rpx 36rpx 14rpx 36rpx;
		box-sizing: border-box;
		.header {
			font-size: 64rpx;
			font-family: NewYork;
			color: #1C1919;
			line-height: 60rpx;
			margin-bottom: 4rpx;
		}
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 54rpx;
			.name {
				font-size: 50rpx;
				font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
				font-weight: bold;
				color: #1C1919;
				line-height: 60rpx;
			}
			.price {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 24rpx;
				
			}
			.share {
				width: 97rpx;
				height: 44rpx;
				background: #000000;
				border-radius: 46rpx;
				font-size: 20rpx;
				color: #fff;
				line-height: 44rpx;
				text-align: center;
			}
		}
		.time, .address {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 24rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.date {
		.must {
			background-color: #fcf2d6;
			color: #b68b64;
			padding: 20rpx 30rpx;
			margin-top: 20rpx;
			.title {
				font-size: 26rpx;
				font-weight: 700;
			}
			.descs {
				font-size: 24rpx;
			}
		}
	}
	
	.desc {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		font-size: 26rpx;
		padding: 24rpx 36rpx;
		.title {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.right {
			margin-left: 40rpx;
		}
	}
	
	.specification {
		padding: 24rpx 36rpx;
		box-sizing: border-box;
		border-bottom: 4rpx solid #DDD8D3;
		.type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			.name {
				width: 220rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 24rpx;
			}
			.tab {
				display: flex;
				flex-wrap: wrap;
				.btn {
					height: 70rpx;
					line-height: 70rpx;
					padding: 0rpx 20rpx;
					border: 2rpx solid #000;
					color: #000;
					background-color: #fff;
					margin-bottom: 20rpx;
				}
			}
			.price {
				width: 154rpx;
				text-align: center;
				margin-top: 10rpx;
				font-size: 26rpx;
			}
		}
		
		::v-deep .nut-button--normal {
			width: 154rpx;
			height: 52rpx;
			font-size: 26rpx !important;
		}
		
		.number {
			.name {
				width: 120rpx;
			}
		}
	}
	
	
	.bottom-btn {
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		padding: 0rpx 56rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		z-index: 99;
		height: 140rpx;
		width: 100%;
		.btn-item-two {
			width: 50%;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
			border-left: 0rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			box-sizing: border-box;
		}
		
		.active {
			background: linear-gradient(to right, #ff7e5f, #feb47b);
			color: #fff;
		}
	}
	
	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 56rpx;
		box-sizing: border-box;
		.wxchat, .code {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			image {
				width: 140rpx;
				height: 140rpx;
			}
			text-align: cell;
		}
	}
	.btn {
		margin: 0 auto;
		width: 90%;
		text-align: center;
		color: #fff;
		line-height: 92rpx;
		height: 92rpx;
		background: #000000;
		border-radius: 46rpx;
	}
	
	.bottom-detail {
		padding: 100rpx 56rpx 62rpx 56rpx;
		box-sizing: border-box;
		position: relative;
		::v-deep .nut-button--normal {
			width: 154rpx;
			height: 52rpx;
			font-size: 26rpx !important;
		}
		image {
			position: absolute;
			top: -100rpx;
			z-index: 9999;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			width: 184rpx;
			height: 184rpx;
			border-radius: 50%;
		}
		.title {
			text-align: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 60rpx;
		}
		.price {
			text-align: center;
			font-size: 46rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 60rpx;
			margin-bottom: 10rpx;
		}
		.tip {
			text-align: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 24rpx;
			margin-bottom: 22rpx;
		}
		.btn {
			width: 100%;
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}
		.specification {
			padding: 24rpx 36rpx;
			box-sizing: border-box;
			.type {
				display: flex;
				align-items: center;
				.title {
					text-align: left;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1C1919;
					line-height: 24rpx;
				}
				.name {
					width: 220rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1C1919;
					line-height: 24rpx;
				}
				.tab {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					margin-left: 36rpx;
				}
				.price {
					width: 154rpx;
					text-align: center;
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
			
			.number {
				.name {
					width: 120rpx;
				}
			}
			
			.tip {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
